<template>
  <view>
    <u-tabs
      :list="tabList"
      :current="current"
      @change="changeTab"
      line-color="#5db292"
    >
    </u-tabs>
    <z-paging
      ref="paging"
      v-model="couponList"
      @query="getCouponList"
      scrollable
      height="calc(100vh - 44px - 16px)"
      :fixed="false"
      :auto-hide-loading-after-first-loaded="false"
      :use-page-scroll="false"
    >
      <template #loading>
        <view class="w-full h-full flex items-center justify-center">
          <u-loading-icon mode="circle" color="#86bf9e"></u-loading-icon>
        </view>
      </template>
      <view
        v-for="item in couponList"
        :class="{ 'p-12': true, 'coupon-list': current === 2 }"
      >
        <view>
          <view class="h-80 over-hidden">
            <view class="h-79 top-0 left-0 w-full coupon flex items-center">
              <!--              <view class="top-tip">新人券</view>-->
              <view
                class="text-red w-100 h-full flex-col items-center justify-center left-coupon"
              >
                <view>
                  <!--                 type - 1满减 2-折扣 -->
                  <text class="text-12" v-if="item.type === 1">￥</text>
                  <text class="text-24 text-bold">{{
                    item.type === 1 ? item.couponAmount : item.discount * 10
                  }}</text>
                  <text class="text-14" v-if="item.type === 2">折</text>
                </view>
                <view class="text-12">
                  {{
                    item.conditionAmount
                      ? "满" + item.conditionAmount + "元可用"
                      : "无门槛"
                  }}
                </view>
              </view>
              <view class="flex justify-between flex-1 px-12 items-center">
                <view class="pl-12 color-black">
                  <view class="text-16 ellipsis-1 text-bold">{{
                    item.couponName
                  }}</view>
                  <view class="text-12 pt-8 ellipsis-1">仅剩86天10时1分</view>
                </view>
                <view>
                  <u-button
                    custom-style="height:64rpx;padding:0 24rpx"
                    :text="btnText[current]"
                    color="red"
                    shape="circle"
                  ></u-button>
                </view>
              </view>
            </view>
          </view>
          <view class="text-12 mt-8 color-tip ellipsis-1">
            蓝莓优惠券，满100元可用，限单品使用，不与其他优惠券叠加使用。
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
import { fetchMyCouponList } from "@/services/api";
import GoodsRowItem from "@/components/goods-row-item/index.vue";

export default {
  components: { GoodsRowItem },
  data() {
    return {
      tabList: [{ name: "未使用" }, { name: "已使用" }, { name: "已过期" }],
      current: 0,
      btnText: {
        0: "去使用",
        1: "已使用",
        2: "未使用",
      },
      couponList: [],
      params: {
        //状态 0. 未使用  1.已使用
        isUse: 0,
        //状态 0 未过期 1已过期
        isExpire: 0,
      },
    };
  },
  methods: {
    changeTab({ index }) {
      this.current = index;
      switch (index) {
        case 0:
          this.params = {
            isUse: 0,
            isExpire: 0,
          };
          break;
        case 1:
          this.params = {
            isUse: 1,
          };
          break;
        case 2:
          this.params = { isUse: 0, isExpire: 1 };
      }
      this.$refs.paging.reload();
    },
    async getCouponList(pageNum, pageSize) {
      const { data, error } = await fetchMyCouponList({
        pagination: {
          pageNum,
          pageSize,
        },
        ...this.params,
      });
      if (!error) {
        this.$refs.paging?.complete(data);
      } else {
        this.$refs.paging?.complete(false);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.coupon-list {
  filter: grayscale(100%);
}
.coupon {
  border-radius: 24rpx;
  position: relative;
  background-color: #fcf2f2;
  border: 1rpx solid #e88992;
  box-sizing: border-box;
  .top-tip {
    position: absolute;
    top: 0;
    left: 0;
    background-color: red;
    color: #fff;
    padding: 4rpx 16rpx;
    border-radius: 16rpx 0 16rpx 0;
    font-size: 10px;
  }
  .left-coupon {
    box-sizing: border-box;
    border-right: 1px dashed #e88992;
  }

  &:before {
    content: " ";
    width: 24rpx;
    height: 24rpx;
    background-color: #fff;
    border: 0.5px solid #e88992;
    border-radius: 50%;
    position: absolute;
    top: -14rpx;
    left: 188rpx;
  }

  &:after {
    content: " ";
    width: 24rpx;
    height: 24rpx;
    background-color: #fff;
    border: 0.5px solid #e88992;
    border-radius: 50%;
    position: absolute;
    bottom: -14rpx;
    left: 188rpx;
  }
}
</style>
